<template>
<!DOCTYPE html>
  <html>
  <body>
  <!-- HEADER -->
  <header>
    <!-- TOP HEADER -->
    <div id="top-header">
      <div class="container">
        <ul class="header-links pull-left">
          <li><a href="#"><i class="fa fa-phone"></i> +0755-88666666</a></li>
          <li><a href="#"><i class="fa fa-envelope-o"></i> Apple@Apple.com</a></li>
          <li><a href="#"><i class="fa fa-map-marker"></i> 深圳市南山区粤兴五道66号</a></li>
        </ul>
        <ul class="header-links pull-right">
          <li><a href="#"><i class="fa fa-dollar"></i> USD</a></li>
          <li><a href="#"><i class="fa fa-user-o"></i><router-link :to="{ path:'/Login'}"> 登录</router-link></a></li>
        </ul>
      </div>
    </div>
    <!-- /TOP HEADER -->

    <!-- MAIN HEADER -->
    <div id="header">
      <!-- container -->
      <div class="container">
        <!-- row -->
        <div class="row">
          <!-- LOGO -->
          <div class="col-md-3">
            <div class="header-logo">
              <a href="#" class="logo">
                <img src="../../assets/img/logo.png" alt="">
              </a>
            </div>
          </div>
          <!-- /LOGO -->

          <!-- SEARCH BAR -->
          <div class="col-md-6">
            <div class="header-search">
              <form>
                <select class="input-select">
                  <option value="0">所有苹果</option>
                  <option value="1">新鲜苹果</option>
                  <option value="2">特价苹果</option>
                </select>
                <input class="input" placeholder="蛇果 | 青苹果 | 红富士 | 红星 | 金冠">
                <button class="search-btn">搜索</button>
              </form>
            </div>
          </div>
          <!-- /SEARCH BAR -->

          <!-- ACCOUNT -->
          <div class="col-md-3 clearfix">
            <div class="header-ctn">
              <!-- Wishlist -->
              <div>
                <a href="#">
                  <i class="fa fa-heart-o"></i>
                  <span>心愿单</span>
                  <div class="qty">2</div>
                </a>
              </div>
              <!-- /Wishlist -->

              <!-- Cart -->
              <div class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                  <i class="fa fa-shopping-cart"></i>
                  <span>购物车</span>
                  <div class="qty">3</div>
                </a>
                <div class="cart-dropdown">
                  <div class="cart-list">
                    <div class="product-widget">
                      <div class="product-img">
                        <img src="../../assets/img/Apple04.png" alt="">
                      </div>
                      <div class="product-body">
                        <h3 class="product-name"><a href="">红富士</a></h3>
                        <h4 class="product-price"><span class="qty">1x</span>￥980.00</h4>
                      </div>
                      <button class="delete"><i class="fa fa-close"></i></button>
                    </div>

                    <div class="product-widget">
                      <div class="product-img">
                        <img src="../../assets/img/Apple03.png" alt="">
                      </div>
                      <div class="product-body">
                        <h3 class="product-name"><a href="">青苹果</a></h3>
                        <h4 class="product-price"><span class="qty">3x</span>￥9980.00</h4>
                      </div>
                      <button class="delete"><i class="fa fa-close"></i></button>
                    </div>
                  </div>
                  <div class="cart-summary">
                    <small>您选择了4个商品</small>
                    <h5>总计: ￥2940.00</h5>
                  </div>
                  <div class="cart-btns">
                    <a href="#">查看购物车</a>
                    <a href="#">结算<i class="fa fa-arrow-circle-right"></i></a>
                  </div>
                </div>
              </div>
              <!-- /Cart -->

              <!-- Menu Toogle -->
              <div class="menu-toggle">
                <a href="#">
                  <i class="fa fa-bars"></i>
                  <span>Menu</span>
                </a>
              </div>
              <!-- /Menu Toogle -->
            </div>
          </div>
          <!-- /ACCOUNT -->
        </div>
        <!-- row -->
      </div>
      <!-- container -->
    </div>
    <!-- /MAIN HEADER -->
  </header>
  <!-- /HEADER -->
  <nav id="navigation">
    <!-- container -->
    <div class="container">
      <!-- responsive-nav -->
      <div id="responsive-nav">
        <!-- NAV -->
        <ul class="main-nav nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">热卖</a></li>
          <!--<li><a href="#">Categories</a></li>-->
          <!--<li><a href="#">Laptops</a></li>-->
          <!--<li><a href="#">Smartphones</a></li>-->
          <!--<li><a href="#">Cameras</a></li>-->
          <!--<li><a href="#">Accessories</a></li>-->
        </ul>
        <!-- /NAV -->
      </div>
      <!-- /responsive-nav -->
    </div>
    <!-- /container -->
  </nav>
  <!-- /NAVIGATION -->

  <!-- SECTION -->
  <div class="section">
    <!-- container -->
    <div class="container">
      <!-- row -->
      <div class="row" style="text-align: center;font-size: 330px;color: rgb(209, 0, 36)">
        404
      </div>
      <!-- /row -->
    </div>
    <!-- /container -->
  </div>
  <!-- /SECTION -->

  <!-- FOOTER -->
  <footer id="footer">
    <!-- top footer -->
    <div class="section">
      <!-- container -->
      <div class="container">
        <!-- row -->
        <div class="row">
          <div class="col-md-3 col-xs-6">
            <div class="footer">
              <h3 class="footer-title">关于我们</h3>
              <ul class="footer-links">
                <li><a href=""><i class="fa fa-hand-o-right"></i>
                  目前研发的是基于区块链技术的食品溯源系统，它具有高效性、安全性、可扩展性，
                  以分布式核算，使每位用户可追溯食品来源，增强食品安全性，吃得更安心。</a></li>
                <li><a href=""><i class="fa fa-map-marker"></i>深圳市南山区粤兴五道66号</a></li>
                <li><a href=""><i class="fa fa-phone"></i>+0755-88666666</a></li>
                <li><a href=""><i class="fa fa-envelope-o"></i>Apple@Apple.com</a></li>
              </ul>
            </div>
          </div>

          <div class="col-md-3 col-xs-6">
            <div class="footer">
              <h3 class="footer-title">产地</h3>
              <ul class="footer-links">
                <li><a href="">新疆阿克苏红旗坡</a></li>
                <li><a href="">甘肃省平凉市静宁县</a></li>
                <li><a href="">云南昭通</a></li>
                <li><a href="">山东烟台</a></li>
                <li><a href="">陕西洛川</a></li>
              </ul>
            </div>
          </div>

          <div class="clearfix visible-xs"></div>

          <div class="col-md-3 col-xs-6">
            <div class="footer">
              <h3 class="footer-title">信息</h3>
              <ul class="footer-links">
                <li><a href="">关于我们</a></li>
                <li><a href="">联系我们</a></li>
                <li><a href="">隐私政策</a></li>
                <li><a href="">订单查询</a></li>
                <li><a href="">English Site</a></li>
              </ul>
            </div>
          </div>

          <div class="col-md-3 col-xs-6">
            <div class="footer">
              <h3 class="footer-title">服务</h3>
              <ul class="footer-links">
                <li><a href="">我的账户</a></li>
                <li><a href="">查看购物车</a></li>
                <li><a href="">心愿单</a></li>
                <li><a href="">订单追踪</a></li>
                <li><a href="">帮助</a></li>
              </ul>
            </div>
          </div>
        </div>
        <!-- /row -->
      </div>
      <!-- /container -->
    </div>
    <!-- /top footer -->

    <!-- bottom footer -->
    <div id="bottom-footer" class="section">
      <div class="container">
        <!-- row -->
        <div class="row">
          <div class="col-md-12 text-center">
            <ul class="footer-payments">
              <li><a href="#"><i class="fa fa-qq"></i></a></li>
              <li><a href="#"><i class="fa fa-wechat"></i></a></li>
              <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-paper-plane"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            </ul>

          </div>
        </div>
        <!-- /row -->
      </div>
      <!-- /container -->
    </div>
    <!-- /bottom footer -->
  </footer>

  </body>
  </html>
</template>
<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },methods:{
    init(){}

  },
  created(){
    this.init();
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
  @import '../../assets/css/font-awesome.min.css'
  @import '../../assets/css/nouislider.min.css'
  @import '../../assets/css/slick.css'
  @import '../../assets/css/style.css'
</style>
